<script setup name="Index">
import { tableOptions } from '@/plugins/vxetable.js'
import { ElInput } from 'element-plus'
import BaseDialog from "@/components/BaseDialog/BaseDialog.vue";
import BaseForm from "@/components/BaseForm/BaseForm.vue";
import {formatDate} from "@/utils/day.js";
import SearchForm from "@/components/SearchForm/SearchForm.vue";

const table = reactive({
  ...tableOptions(),
  columns: [
    {
      field: 'id',
      title: 'ID',
      width: 80,
      visible: false,
    },
    {
      field: 'name',
      title: 'Name',
      width: 200,
      editRender: {
        type: 'input',
        attrs: {
          placeholder: 'Please input name',
        },
      },
    },
    {
      field: 'age',
      title: 'Age',
      width: 100,
      editRender: {
        type: 'input',
        attrs: {
          type: 'number',
          placeholder: 'Please input age',
        },
      },
    },
    {
      field: 'address',
      title: 'Address',
      width: 300,
      editRender: {
        type: 'textarea',
        attrs: {
          placeholder: 'Please input address',
        },
      },
    },
  ],
  data: [
    { id: 1, name: 'John', age: 20, address: 'New York' },
    { id: 2, name: 'Smith', age: 25, address: 'London' },
    { id: 3, name: 'Lee', age: 30, address: 'Paris' },
  ],
  pagerConfig: {
    pageSize: 10,
    pageSizes: [10, 20, 30, 40, 50],
  },
})
const form = ref({})



const testVisible = ref(false)

function test() {
  testVisible.value = true
}

const columns = ref([
  {
    type: 'input',
    field: 'username',
    label: '用户名',
    rules: [
      { required: true, message: '请输入用户名' },
      { min: 3, max: 20, message: '长度在 3 到 20 个字符' }
    ],
    placeholder: '请输入用户名'
  },
  {
    type: 'input',
    field: 'password',
    label: '密码',
    showPassword: true,
    rules: [
      { required: true, message: '请输入密码' },
      { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,}$/, message: '密码必须包含大小写字母和数字' }
    ]
  },
  {
    type: 'select',
    field: 'role',
    label: '角色',
    options: {
      data: [
        { value: 'admin', label: '管理员' },
        { value: 'user', label: '普通用户' }
      ]
    },
    rules: [{ required: true, message: '请选择角色' }]
  },
  {
    type: 'radio',
    field: 'gender',
    label: '性别',
    options: {
      data: [
        { value: 1, label: '男' },
        { value: 2, label: '女' }
      ]
    }
  },
  {
    type: 'checkbox',
    field: 'interests',
    label: '兴趣爱好',
    options: {
      data: [
        { value: 'reading', label: '阅读' },
        { value: 'music', label: '音乐' },
        { value: 'sports', label: '运动' }
      ]
    }
  },
  {
    type: 'switch',
    field: 'status',
    label: '状态',
    activeText: '启用',
    inactiveText: '禁用'
  },
  {
    type: 'date',
    field: 'birthday',
    label: '生日',
    valueFormat: 'YYYY-MM-DD'
  },
  {
    type:'date',
    field: 'date',
    label: '日期',
    valueFormat: 'YYYY-MM-DD'
  },
  {
    type: 'daterange',
    field: 'dateRange',
    label: '日期范围',
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期',
    valueFormat: 'YYYY-MM-DD'
  },
  {
    type: 'autocomplete',
    field: 'city',
    label: '城市',
    options: {
      data: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' }
      ]
    }
  },
  {
    type: 'slot',
    field: 'custom',
    label: '自定义字段',
    slotName: 'customField',
    rules: [{ required: true, message: '请填写自定义字段' }],
    span: 2
  }
])
// 表单数据
const formData = ref({
  username: '',
  password: '',
  role: 'admin',
  gender: 2,
  interests: [],
  status: null,
  birthday: '',
  date: formatDate(new Date(), 'YYYY-MM-DD'),
  dateRange: [],
  city: '',
  custom: ''
})

// 表单配置项
const options = {
  labelPosition: 'right',
  labelWidth: '100px',
  size: 'default',
  submitButtonProps: {
    class: 'custom-submit-btn'
  }
}

// 控制提交按钮禁用状态
const loading = ref(false)
const submitDisabled = computed(() => {
  // 可以根据具体业务逻辑来决定按钮是否禁用
  return loading.value || !formData.value.username
})

// 自定义验证
const validateCustomField = (rule, value, callback) => {
  if (value.length < 5) {
    callback(new Error('长度不能小于5个字符'))
  } else {
    callback()
  }
}

// 表单提交
const handleSubmit = async (data) => {
  loading.value = true
  try {
    // 模拟异步提交
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('提交数据:', data)
  } finally {
    loading.value = false
  }
}

// 表单重置
const handleReset = () => {
  console.log('表单已重置')
}

const searchColumns = [
  {
    type: 'input',
    label: '用户名',
    field: 'username',
    placeholder: '请输入用户名',
  },
  {
    type: 'select',
    label: '性别',
    field: 'gender',
    placeholder: '请选择性别',
    options: {
      data: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
      ],
    },
  },
  {
    type: 'date',
    label: '注册时间',
    field: 'registerDate',
    placeholder: '请选择日期',
  },
]

const initData = ref({
  username: '',
  gender: '',
  registerDate: '',
})
function handleSearch(fields) {
  console.log('搜索参数:', fields)
}

</script>

<template>
  <div class="app-container home">
    <vxe-grid
        v-bind="table"
    />
    <el-button @click="test">
      测试
    </el-button>
    <base-dialog title="测试" v-model:visible="testVisible">
      12
    </base-dialog>
    <el-card shadow="never" class="container max-auto">
      <SearchForm
          :columns="searchColumns"
          :init-data="initData"
          :is-reset-button="true"
          @search="handleSearch"
          @reset="handleReset"
      />
      <BaseForm
          :columns="columns"
          :model="formData"
          :options="options"
          :grid="{ cols: 2, gap: 20 }"
          :loading="loading"
          :submit-disabled="submitDisabled"
          @submit="handleSubmit"
          @reset="handleReset"
      >
        <template #customField="{ value, updateValue }">
          <div class="custom-field">
            <el-input
                :value="value"
                @input="updateValue"
            />
            <el-button class="ml-2" @click="() => updateValue(value + '!')"
            >追加感叹号</el-button
            >
          </div>
        </template>
      </BaseForm>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
